<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收集表单数据</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            font-size: 18px;
        }
        form{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .item{
            width: 350px;
            margin-top: 10px;
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
    <!-- 
        总结
        1:label 标签里属性:for 可以指定 input中的 id 效果点击后光标选中input
        2:JSON.parse(jsonSting) 可以解析jsonSting JSON.stringify(jsonObject)
        3:当input type = checkbox 时 v-model='array' 值一定要是array 每一个选项要编写value 
        不然默认去找checked的值,它的值为true or flase 可以不添加name属性,
        3:当input type = radio 时 是单选框,每组单选框要添加name,name要是同一个值
        还要编写v-model='hobby' 和value='male' 第二个value='female'
        4:其他输入框 input:type=text textarea select 只要编写v-model 就可以可
        5:v-model的三个修饰符
            v-model.number 是其值为number类型 一般用在input:number中
            v-model.lazy lazy 懒惰的 失去焦点在更新data
            v-model.trim 去除用户输入首尾的空格
     -->
    <div id="root">
        <form @submit.prevent="submit">
            <!-- label 可以是用户点击用户这个文字是选择到for对象的input框 -->
            <div class="item">
                <label for="account">账号：</label>
                <input type="text" id="account" v-model.trim="userInfo.account">
            </div>

            <div class="item">
                <label for="password">密码：</label>
                <input type="password" id="password" v-model="userInfo.password">
            </div>
            
            <div class="item">
                <label for="age">年龄：</label>
                <input type="number" max="100" min="0" id="age" v-model.number="userInfo.age">
            </div>
            <div class="item">
                <label for="sex">性别：</label>
                男:<input type="radio" name="sex" v-model="userInfo.sex" value="male">
                女:<input type="radio" name="sex" v-model="userInfo.sex" value="female">
            </div>
            <div class="item">
                <label for="hobby">爱好：</label>
                读书:<input type="checkbox"  v-model="userInfo.hobby" value="read">
                写字:<input type="checkbox"  v-model="userInfo.hobby" value="write">
                玩游戏:<input type="checkbox"  v-model="userInfo.hobby" value="game">
            </div>

            <div class="item">
                <label>城市：</label>
                <select name="" v-model="userInfo.city">
                    <option value="">请选择城市</option>
                    <option value="leping">乐平</option>
                    <option value="nanchang">南昌</option>
                    <option value="jingdezhen">景德镇</option>
                </select>
            </div>
            <div class="item">
                <label for="other">其他：</label>
                <textarea v-model.lazy="userInfo.other"></textarea>
            </div>
            <div class="item">
                <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href=""> 用户协议 </a>
            </div>
            <!-- 给form 添加@submit.prevent 或者给 按钮添加点击事件都可以实现  -->
            <button>提交</button>
        </form>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示。
    //创建Vue
    const vm = new Vue({
        el:'#root', 
        data:{
            userInfo:{
                account:'',
                password:'',
                age:null,
                sex:'',
                hobby:[],
                city:'',
                other:'',
                agree:false
            }
        },
        methods:{
            submit(){
                //JSON.parse parse 解析 和 JSON.stringify() 转化成json字符串
                console.log(JSON.parse(JSON.stringify(this.userInfo)))
            }
        }
    })

</script>
</html>